$black: #000;
$black-light: #333333;
$grey: #666;
$red: #ff4f4f;
$yellow: #ffdd00;
$border-line: #d5a000;
.navigator {
    position: relative;
    height: rem(88px);
    text-align: center;
    line-height: rem(88px);
    &:after {
        position: absolute;
        display: block;
        content: '';
        border-bottom: 1px solid #e8e8e8;
        // transform: scaleY(.5);
        bottom: 0;
        left: 0;
        right: 0;
    }
    .back {
        position: absolute;
        left: 0;
        top: 0;
        width: rem(43px);
        height: rem(88px);
        margin-left: rem(27px);
        background-image: url(../images/btn-back.png);
        background-repeat: no-repeat;
        background-size: rem(43px) rem(36px);
        background-position: center;
    }
    .title {
        width: 100%;
        font-size: rem(32px);
        text-align: center;
        font-weight: 700;
    }
}

.tipBar {
    height: rem(88px);
    font-size: rem(30px);
    text-align: center;
    position: relative;
    background: #fff;
    margin: rem(14px) 0 rem(23px);
    line-height: rem(88px);
    i {
        position: relative;
        padding-top: rem(34px);
        padding-left: rem(34px);
        margin-right: rem(10px);
        &:after {
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            // margin-top: rem(-2px);
            width: rem(34px);
            height: rem(34px);
            background-image: url(../images/icon-tip.png);
            background-size: contain;
        }
    }
    &:after,
    &:before {
        position: absolute;
        display: block;
        content: "";
        border-top: 1px solid #e8e8e8;
        transform: scaleY(.5);
        left: 0;
        right: 0;
    }
    &:before {
        top: 0;
    }
    &:after {
        bottom: 0;
    }
}

.content {
    padding: 0 rem(63px) 0 rem(37px);
    .title {
        font-size: rem(28px);
        color: $grey;
        font-weight: normal;
        display: flex;
        p:last-child {
            padding-left: rem(164px);
        }
    }
}

.items {
    padding-top: rem(15px);
    display: flex;
    flex-direction: column-reverse;
}

.item {
    clear: both;
    .state {
        float: left;
        display: flex;
        flex-direction: column-reverse;
        width: rem(106px);
        margin-top: rem(44px);
        margin-bottom: rem(-44px);
        .state-coin {
            position: relative;
            height: rem(150px);
            width: rem(32px);
            margin-left: rem(50px);
            margin-bottom: rem(44px);
            .state-bar-bg,
            .state-percent {
                position: absolute;
                width: rem(32px);
                bottom: 0;
                z-index: 0;
                left: rem(12px);
            }
            .state-bar-bg {
                height: 100%;
                background: #e1e1e1;
            }
            .state-percent {
                background: $yellow;
                // border-top: 1px solid #d5a000;
                border-left: 1px solid #d5a000;
                border-right: 1px solid #d5a000;
                &:after,
                &:before {
                    position: absolute;
                    display: block;
                    content: '';
                    border-left: 1px solid #ffff00;
                    top: 0;
                    bottom: 0;
                }
                &:after {
                    left: 0;
                }
                &:before {
                    right: 0;
                }
            }
            .step {
                display: flex;
                // display: inline;
                position: absolute;
                top: rem(-44px);
                left: rem(-50px);
                color: $black;
                z-index: 99;
                >div {
                    height: rem(44px);
                    width: rem(99px);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                p {
                    font-size: rem(32px);
                    line-height: rem(44px);
                    width: rem(30px);
                    text-align: center;
                }
                span {
                    display: block;
                    position: relative;
                    font-size: rem(24px);
                    width: rem(82px);
                    text-align: center;
                    height: rem(44px);
                    border-radius: 5px;
                    border-sizing: border-box;
                    line-height: rem(44px);
                    // border: 1px solid #e1e1e1;
                    // background: #fff;
                    background-image: url(../images/box-unar.png);
                    background-size: contain;
                    background-repeat: no-repeat;
                    &.arrowget {
                        background: #fff;
                        height: rem(44px);
                        width: rem(95px);
                        border: 0;
                        background: url(../images/arrow-unget.png) no-repeat;
                        background-size: contain;
                        padding-right: rem(10px);
                        // &:after, &:before {
                        //   display: black;
                        //   position: absolute;
                        //   content: '';
                        // }
                        // &:after {
                        //   height: rem(32px);
                        //   width: rem(32px);
                        //   border-radius: 5px;
                        //   transform: rotate(45deg);
                        //   z-index: 0;
                        //   top: 50%;
                        //   margin-top: rem(-16px);
                        //   right: rem(-15px);
                        //     background: #fff;
                        //   border-right: 1px solid #e1e1e1;
                        //   border-top: 1px solid #e1e1e1;
                        // }
                    }
                }
            }
            &.reach {
                .step span {
                    // border: 1px solid #d5a000;
                    // background: #fff3a4;
                    background-image: url(../images/box-ar.png);
                    &.arrowget {
                        height: rem(44px);
                        width: rem(91px);
                        line-height: rem(44px);
                        // padding-right:rem(18px);
                        // background: $yellow;
                        // box-shadow: inset 5em 1em #ffdd00;
                        background: url(../images/arrow-get.png) no-repeat;
                        background-size: contain;
                        // &:after {
                        //   background: $yellow;
                        //   border-right: 1px solid #d5a000;
                        //   border-top: 1px solid #d5a000;
                        // }
                    }
                }
            }
        }
        // end of state-coin
        .prog1 {
            height: rem(43px);
            .state-percent {
                background: $yellow;
                border-bottom: 1px solid #d5a000;
            }
        }
        .prog2 {
            height: rem(35px);
        }
        .prog3 {
            height: rem(26px);
        }
        .prog4 {
            height: rem(56px);
        }
        .prog5,
        .prog6,
        .prog8 {
            height: rem(55px);
        }
        .prog7 {
            height: rem(59px);
        }
        .prog9 {
            height: rem(57px);
        }
    }
    .prize {
        margin-left: rem(129px);
        display: flex;
        background: #fff;
        border-sizing: border-box;
        position: relative;
        height: rem(154px);
        // justify-content: center;
        // width: rem(411px);
        align-items: center;
        border-radius: 5px;
        border: 1px solid #e1e1e1;
        // &:before {
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   display: block;
        //   content: "";
        //   width: 200%;
        //   height: 200%;
        //   transform: scale(.5);
        //   transform-origin: 0 0;
        //   border-radius: 10px;
        //   z-index: 0;
        // }
        .label {
            position: relative;
            height: rem(154px);
            width: rem(170px);
            text-align: center;
            img {
                width: rem(142px);
                height: rem(157px);
                z-index: 0;
                margin-top: rem(-28px);
            }
            a {
                position: absolute;
                display: none;
                background: $yellow;
                font-size: rem(24px);
                height: rem(42px);
                line-height: rem(42px);
                width: rem(140px);
                margin: 0 auto;
                text-align: center;
                color: $black;
                text-decoration: none;
                border-radius: 5px;
                // margin-top: rem(-20px);
                z-index: 999;
                bottom: rem(15px);
                left: rem(15px);
            }
        }
        >p {
            font-size: rem(26px);
            color: $black;
            line-height: rem(32px);
            padding-left: rem(10px);
            em {
                font-style: normal;
                color: $red;
            }
        }
        .stamp {
            position: absolute;
            display: none;
            background-image: url(../images/label-get.png);
            background-size: contain;
            width: rem(113px);
            height: rem(73px);
            bottom: 5px;
            right: 5px;
        }
    }
    &.arrive {
        // .state-coin 
        .prize {
            a {
                display: block;
            }
        }
    }
    &.get {
        .prize {
            background: $yellow;
            border: 1px solid #d5a000;
            box-shadow: inset 2px 0px 1px #ffff00, inset -2px 1px #ffff00;
            a {
                display: none!important;
            }
            .stamp {
                display: block;
            }
        }
    }
}

// 警告
.warm {
    .state-percent {
        background: #ff4f4f!important;
        border-left: 1px solid #ca2424!important;
        border-right: 1px solid #ca2424!important;
        &:after,
        &:before {
            position: absolute;
            display: block;
            content: '';
            border: 0!important;
        }
    }
    .tipBar i:after {
        background-image: url(../images/icon-warm.png);
    }
    .prog1 {
        .state-percent {
            border-bottom: 1px solid #ca2424!important;
        }
    }
}

.toast{
    position: fixed;
    bottom: rem(32px);
    height: rem(92px);
    line-height: rem(92px);
    width: rem(360px);
    text-align: center;
    left: 50%;
    margin-left: rem(-180px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 8px;
    font-size: rem(30px);
}